<template>
  <div class="page-container">
    <!-- box 开通-->
    <div class="box-wrapper" v-if="enterpriseDetail && enterpriseDetail.tboxEnabled == 1">
      <div class="logo-title-wrapper">
        <span class="title">车载BOX服务</span>
        <div class="open">已开通</div>
      </div>
      <div class="text">如需关闭车载BOX服务请联系启程的工作人员 </div>
      <div class="card-wrapper" v-for="(item, index) in model" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="content-wrapper border-top" v-if="item.content">
          <div class="topic" v-if="item.topic">{{ item.topic }}</div>
          <div class="content flex-row">
            <div class="text-wrapper">
              <div class="text" v-for="(el, i) in item.content" :key="i">{{ el }}</div>
              <div class="text flex-row" v-if="item.config">
                3、临近虚拟钥匙控车单的开始时间，
                <span :class="enterpriseDetail.tboxAutoMsg == 1 ? 'green' : 'red'" style="font-weight: 600">{{
                  enterpriseDetail.tboxAutoMsg == 1 ? '自动发送' : '不自动发送'
                }}</span>
                控车钥匙短信。
                <span style="color: #1890ff; cursor: pointer" @click="getConfig">去配置<icon-right /></span>
              </div>
            </div>
            <div class="qrcode" v-if="item.qrcode">
              <a-image :src="item.qrcode" />
            </div>
          </div>
        </div>
        <div class="content-wrapper border-top" v-else>
          <div class="content flex-col" v-for="(element, j) in item.topicContent" :key="j">
            <div class="topic" v-if="element.topic" :class="{ active: j == 0 }">{{ element.topic }}</div>
            <div class="text-wrapper">
              <div class="text" v-for="(el, i) in element.content" :key="i">{{ el }}</div>
            </div>
          </div>
        </div>

        <div class="btn-wrapper border-top" v-if="item.btn">
          <a-button type="primary" @click="goTo(item.url, item.permission)">{{ item.btn }}</a-button>
        </div>
      </div>
    </div>
    <!-- box 未开通-->
    <div class="box-wrapper active" v-else>
      <div class="logo-title-wrapper">
        <span class="title">车载BOX服务</span>
        <div class="close" style="left: 185px">暂未开通</div>
      </div>
      <div class="text">如需开通ETC服务请联系启程的工作人员 </div>
      <div class="money-wrapper">
        <div class="money">
          <img src="../../../../assets/box-money-bg-2.png" alt="" />
          <div class="msg">
            <div class="money-title">虚拟钥匙，手机控车</div>
            <div class="money-text">减少取送车等待，提高人车比黑科技</div>
          </div>
        </div>
      </div>
      <div class="money-wrapper">
        <div class="money">
          <img src="../../../../assets/box-money-bg-3.png" alt="" />
          <div class="msg">
            <div class="money-title">实时位置、轨迹、油量、里程</div>
            <div class="money-text">车辆状态随时一目了然</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 配置 -->
    <a-modal
      :visible="visible"
      title="发送配置"
      unmount-on-close
      width="45vw"
      :body-style="{ padding: '20px', height: '206px' }"
      @close="onClose"
      @ok="onConfirm"
      @cancel="onClose"
    >
      <div class="center flex-col" style="display: flex; align-items: center">
        <span style="padding-bottom: 20px"> 临近虚拟钥匙控车单的开始时间，是否自动发送控车钥匙短信</span>
        <a-space size="large">
          <a-radio-group v-model="tboxAutoMsg" :options="options" />
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script setup name="Tbox">
  import { reactive, onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { usePermission } from '@/hooks/usePermission'
  import { Message } from '@arco-design/web-vue'
  import installPic from '@/assets/car-box-install.png'
  import installApp from '@/assets/car-box-install-app.png'
  import { getUpdateTbox, getEnterpriseDetail } from '@/api/asset/enterprise.js'
  const router = useRouter()

  // 读取商户配置
  const visible = ref(false)
  const tboxAutoMsg = ref(null)
  const options = ref([
    { label: '自动发送', value: 1 },
    { label: '不自动发送', value: 0 },
  ])

  // 企业信息
  const enterpriseDetail = ref(null)
  const getDetailApi = () => {
    getEnterpriseDetail().then((res) => {
      if (res.code == 200) {
        const result = res.result
        const { config } = result
        enterpriseDetail.value = config
        enterpriseDetail.value.tboxAutoMsg = result.tboxAutoMsg || 0
        console.log(enterpriseDetail.value)
      }
    })
  }

  const model = reactive([
    {
      title: '1 - 设备安装',
      topic: '',
      content: [
        '1、您购买设备后，启程将帮您联系师傅上门安装；',
        '2、安装时，您需要记录车载BOX设备的SN或ID；',
        '3、安装后，哪台车（车牌号）上安装了哪台设备，这个匹配关系是您一定要记清楚的核心信息；',
        '4、您只需把匹配关系录入系统即可完成安装。',
        '5、安装完毕后，请使用鸣笛等能力，核实一遍车与设备的对应关系(如果对着a车操作鸣笛，却是b车响应了操作，则说明匹配关系录错了)',
      ],
      btn: '进入【车载BOX安装】页',
      qrcode: installPic,
      url: '/value-added/device/car-box-install',
      permission: 'svms:asstes:device:car-box-install',
    },
    {
      title: '2 - 商家职员控车',
      topic: '',
      content: ['1、待设备自动上线后即可使用“开门、锁门、断电、供电、位置、轨迹”等车载BOX能力直接控车；', '2、商户端APP中也有相应的功能。'],
      btn: '进入【车载BOX使用】页',
      url: '/value-added/device/car-box-use',
      permission: 'svms:asstes:device:car-box-use',
    },
    {
      title: '3 - 车载BOX数据查询',
      topic: '',
      content: ['位置轨迹、里程油量、设备状态等多种数据类型。'],
      btn: '进入【车载box数据查询】页',
      url: '/value-added/device/car-box-query',
      permission: 'svms:asstes:device:car-box-query',
    },
    {
      title: '4 - 临时授权与无人化交车',
      topic: '',
      content: [
        '1、无论是谁，临时给他车辆的控制权，只需要手机号； ',
        '2、被授权控车的人可以用小程序查看车辆位置，导航寻车、鸣笛寻车、并用小程序开门启动车辆。',
      ],
      btn: '进入【虚拟钥匙控车单】页',
      url: '/order/car-virtual-key/',
      permission: 'svms:asstes:device:car-virtual-key',
    },
    {
      title: '5 - 用户控车-微信小程序【启程车生活】',
      topic: '',
      content: ['1、被授权的临时控车人会收到授权短信； ', '2、短信含链接，点击直达小程序。'],
      config: true,
      qrcode: installApp,
    },
    {
      title: '6 - 租车订单会自动临时授权',
      topic: '',
      content: [
        '1、安装了车载BOX的车辆，租车订单会自动下发控车短信给用户，无需您额外操作； ',
        '2、订单的变更（如续租等操作）会自动调整用户的控车周期。',
      ],
    },
    {
      title: '7 - 应对指南',
      content: '',
      topicContent: [
        {
          topic: '用户不小心在小程序里点了“提前结束控车”：',
          content: ['您可以通过租车订单，找到按钮“重新下发车钥匙”，即可重新授权。'],
        },
        {
          topic: '用户不还车：',
          content: ['1、您可以通过订单上的“拦截虚拟车钥匙”收回用户的控车能力；', '2、在商户后台PC端【虚拟钥匙控车单】中，使用“拦截”。'],
        },
        {
          topic: '用户收不到短信：',
          content: ['在商户后台PC端【虚拟钥匙控车单】中，我们提供了“重发短信”功能。'],
        },
        {
          topic: '还没到约定的开始时间，用户想提前开始控车：',
          content: ['在商户后台PC端【虚拟钥匙控车单】中，我们提供了“即刻启用”功能。'],
        },
      ],
    },
  ])
  const goTo = (url, permission) => {
    if (url) {
      if (usePermission(permission)) {
        router.push({ path: url })
      } else {
        Message.warning(`您没有访问该页面的权限 `)
      }
    }
  }

  const onClose = () => {
    visible.value = false
    tboxAutoMsg.value = null
  }

  const getConfig = () => {
    visible.value = true
    tboxAutoMsg.value = enterpriseDetail.value.tboxAutoMsg
  }

  const onConfirm = async () => {
    const res = await getUpdateTbox({ tboxAutoMsg: tboxAutoMsg.value })
    if (res.code == 200) {
      Message.success('配置成功')
      visible.value = false
      getDetailApi()
    }
  }

  onMounted(() => {
    getDetailApi()
  })
</script>

<style lang="less" scoped>
  .page-container {
    padding-bottom: 0;
    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .green {
      color: #00b42a;
    }
    .red {
      color: #ea0000;
    }

    .box-wrapper {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      &.active {
        height: 71vh;
        padding: 74px 0 0 57px;
        background-image: url('../../../../assets/box-bg.png') !important;
        background-size: 100% 100%;
      }

      .logo-title-wrapper {
        position: relative;
        .title {
          font-weight: 500;
          font-size: 32px;
          color: #1d2129;
          line-height: 40px;
        }
        .open,
        .close {
          position: absolute;
          top: -2px;
          left: 185px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 600;
          font-size: 12px;
          color: #ffffff;
          line-height: 12px;
          width: 50px;
          height: 19px;
          background: linear-gradient(222deg, #ff7a66 0%, #ff5b60 100%);
          border-radius: 60px;
        }
        .close {
          left: 115px;
          color: #919aa5;
          width: 64px;
          background: linear-gradient(222deg, #f2f3f5 0%, #dbdbdb 100%);
        }
      }
      .text {
        font-weight: 400;
        font-size: 14px;
        color: #919aa5;
        line-height: 22px;
        margin: 12px 0 32px 0;
      }
      .money-wrapper {
        .money {
          display: flex;
          align-items: center;
          margin-top: 24px;
          img {
            width: 54px;
            height: 54px;
          }
          .money-title {
            font-weight: 500;
            font-size: 16px;
            color: #1d2129;
            line-height: 22px;
            margin-bottom: 3px;
          }
          .money-text {
            font-weight: 400;
            font-size: 12px;
            color: #919aa5;
            line-height: 22px;
          }
        }
      }
      .card-wrapper {
        margin-bottom: 20px;
        width: 100%;
        .title {
          font-weight: 500;
          font-size: 16px;
          color: #1d2129;
          line-height: 24px;
          padding: 12px 20px;
          background: #f2f3f5;
        }
        .border-top {
          border: 1px solid #e5e6eb;
          border-top: none;
        }
        .content-wrapper {
          padding: 20px;
          background-color: #fff;

          .topic {
            font-weight: 500;
            font-size: 14px;
            color: #1d2129;
            line-height: 22px;
            padding-bottom: 8px;
            padding-top: 20px;
            &.active {
              padding-top: 0 !important;
            }
          }
          .content {
            .qrcode {
              width: 90px;
              height: 90px;
              margin-left: 75px;
              cursor: pointer;
            }
            .text {
              color: #1d2129;
              margin: 0;
            }
          }
        }
        .btn-wrapper {
          padding: 16px 20px;
          text-align: right;
          background-color: #fff;
        }
      }
    }
  }
</style>
